<template>
  <div class="card-goods__item">
    <van-checkbox v-if="checkbox" :name="goods.id" />
    <img v-lazy="imageUrl" width="90px" height="90px" @click="toGoods"/>
    <div class="card-goods__title">
      <div class="goods_title" @click="toGoods">{{goods.title || goods.productName}}</div>
      <div style="font-size: 12px; color: gray;">
        <div>{{goods.specTitle}}</div>
        <div v-if="goods.optionname || goods.skuTitle" >商品规格：{{goods.optionname || goods.skuTitle}}</div>
      </div>
      <div class="goods_items">
        <div class="card-goods__price">
          <b v-if="user.isVip && goods.vipprice && goods.isvip">{{goods.vipprice}}</b>
          <b v-else>{{goods.marketprice}}</b>
          <s v-if="goods.productprice" class="market_price">{{goods.productprice}}</s>
        </div>
        <div>
          <van-stepper class="goods_stepper" v-if="stepper" v-model="total" :min="minNum" :max="maxNum" @change="onNumChange"/>
          <div class="goods_total" v-else>×{{goods.total}}<span class="status_text">{{statusText}}</span></div>
        </div>
      </div>
      <slot name="right-text"></slot>
    </div>
    <div class="cart_delete" v-if="isEditor" @click="onDel">删除</div>
  </div>
</template>

<script>
import item_mix from "@/vue/mixin/item-card";
import { IMAGE_PREFIX } from "@/api/goods"
import { CART_EDIT } from "@/api/shop";
import { Checkbox, Stepper} from "vant";
import {
  GOODS_DETAIL
} from "@/api/goods";
export default {
  name: "order-item",
  mixins: [item_mix],

  props: {
      goods: Object,
      stepperNum: [Number],
      checkbox: {
          type: Boolean,
          default: true
      },

      isEditor: {
          type: Boolean,
          default: false
      },

      minNum: {
        type: [String, Number],
        default: 0
      },

      maxNum: {
        type: [String, Number],
      },

      stepper: {
        type: Boolean,
        default: true
      }
  },
  data() {
    return {
      total: this.goods.total,
      status: this.goods.status,
      // 修改
      id: this.goods.id,
      skuId: this.goods.skuId,
      cartNum:0
    }
  },
  watch: {
    stepperNum() {
      this.total = this.stepperNum;
    },
    cartNum(){
      // console.log('数值改变')
      this.$emit("cartChange",this.$util.getSessionStorage("order").cartItems)
    },
  },

  computed: {
      imageUrl() {
          let url = this.goods.thumbSquare || this.goods.thumb;
          return this.convertImageUrl(url);
      },
      statusText() {
        const status = this.goods.status;

	      if (status === -1) {
	        return "已取消";
	      } else if (status === 0) {
	        return "待付款";
	      } else if (status === 1) {
	        return "待发货";
	      } else if (status === 2) {
	        return "已发货";
	      } else if (status === 3) {
	        return "已收货";
	      } else if (status === 4) {
	        return "待退款";
	      } else if (status === 5) {
	        return "售后中";
	      } else if (status === 6) {
	        return "已完成";
	      } else {
	        return "";
	      }
      }
  },
  methods: {
      onNumChange(num) {
            
            // 只有在提交订单的页面才可以操作
            if (this.$route.path == "/order/placeOrderEntity") {
              console.log('手写')
              console.log(num)
              // 当商品数量改变时，判断商品数量是否达到上限
                if (num === 0) {
                  this.$toast('商品数量不能再减了');
                } else {
                  let item = this.goods;
                  //当从详情页来到提交订单页面时，不需要将数据提交到后台
                        let items = this.$util.getSessionStorage("order").cartItems;
                        for (let i =0; i< items.length; i++) {
                          // 规格相同
                          if (items[i].skuId == this.skuId && items[i].productId== this.id) {
                              items[i].total = num;
                              break;
                          } else {
                              if(items[i].productId== this.id){
                                items[i].total = num;
                                break;
                              }
                          }
                        }
                        this.$util.setSessionStorage("order", {cartItems: items, payback: {name: this.$route.name, params: this.$route.params}});
                        this.cartNum = num;
                  }
                }
          this.$emit("onNumChange", num);
          //如果改变失效，要回到当前的数量
          this.$nextTick(() => {
            if (this.stepperNum && this.total != this.stepperNum) {
              this.total = this.stepperNum;
            }
          });
      },
      // 提交订单：进行数量改变时，判断上限并且将对应商品的数量传到数据库
      carSubmit(num, item) {
            this.$reqPost(CART_EDIT, {id: item.cartId, total: num}, {hideLoading: true}).then(res => {
              this.changeCartNum(num - this.initTotal);
              this.initTotal = num;
            });
          },

      onDel() {
          this.$emit("onDel");
      },

      toGoods() {
        //生成订单页进入商品详情页取 商品id
        if (this.$route.path == "/order/placeOrderEntity") {
            this.$router.push({ path: `/items/detail/${this.goods.id}` });
            return;
        }
        //其他页进入商品详情页取 商品productId
        this.$router.push({ path: `/items/detail/${this.goods.productId}` });
      }
  },
  components: {
    [Stepper.name]: Stepper,
    [Checkbox.name]: Checkbox,
  }
};
</script>

<style lang="scss" scoped>
.card-goods__item {
  display: flex;
  align-items: center;
  -webkit-align-items: center;
  background-color: #fff;
}

.cart_delete {
  padding: 5px;
  color: #fff;
  background-color: $red;
  margin-left: 15px;
}

.card-goods__title {
  margin-left: 5px;
  max-height: fit-content;
  flex: 1;
}

.card-goods__price {
  margin-top: 20px;
  color: $red;
  font-size: 16px;
  display: inline-block;
  flex: 1;

  ::before {
    content: "¥";
    font-size: 8px;
    margin-right: 3px;
  }

  .market_price {
      margin-left: 10px;
      color: gray;
      font-size: 12px;
  }
}
.goods_title {
  max-height: fit-content;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
  .goods_stepper {
      float: right;
      // margin-top: 15px;
  }
  .goods_total {
      float: right;
      font-size: 15px;
      text-align: right;
  }

.goods_items {
  display: flex;
  align-items: center;
}
.status_text {
  font-size: 12px;
  margin-left: 10px;
  color: $red;
}
</style>
